<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<link rel="stylesheet" type="text/css" href="../css/login.css"/>
		<style type="text/css">
			.mui-content{position: absolute;margin-left: 4%;height: auto;}
			.login-form{padding-top: 30px;}
			.cs_yan{position: relative;}
			.cs_yan span{position: absolute;color: #fff;background-color: #ffb02c;right: 0;top: 6px;padding: 8px 15px;border-radius: 18px;}
			.cs_disable{background-color: #9d9d9d !important;}
			.cs_form1{margin-top: 40vw;}
			.cs_form2{display: none;opacity: 0; margin-top: 300px;}
		</style>
		<title>忘记密码</title>
	</head>
	<body>
		<header id="header" class="mui-bar mui-bar-nav jjs-header">
		<h2 class="mui-title">忘记密码</h2>
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left header-left"></a>
		<a class="mui-icon mui-icon-bars mui-pull-right header-right"></a>
	</header>
	<div class="mui-content cs_form1">
		<form class="mui-input-group login-form ">
			<div class="mui-input-row phone-input cs_phone">
				<input type="text" placeholder="请输入邮箱/手机号">
				<i></i>
			</div>
			<div class="mui-input-row phone-input cs_yan">
				<input type="text" placeholder="请输入验证码">
				<span onclick="getcode()">获取验证码</span>
			</div>
			<button type="button" class="mui-btn mui-btn-block login-btn" onclick="next()">下一步</button>
		</form>
	</div>
	
	<div class="mui-content cs_form2">
	<form class="mui-input-group login-form ">
			<div class="mui-input-row pwd-input">
				<input type="text" placeholder="重新设置密码">
				<i></i>
			</div>
			<div class="mui-input-row pwd-input">
				<input type="text" placeholder="确认你的密码">
				<i></i>
			</div>
			<button type="button" class="mui-btn mui-btn-block login-btn" onclick="reset_pwd()">修改密码</button>
		</form>
	</div>	
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var regrealphone = /^1[3|4|5|7|8][0-9]{9}$/;//手机号码
//			修改密码
			function reset_pwd () {
				
			}
			
			function getcode () {
				
				if($('.cs_yan span').hasClass('cs_disable')){
					return mui.toast('请稍后再试~');
				}
				var phone = $(".cs_phone input").val();
				if(!regrealphone.test(phone)){
				 	return	mui.alert('','您输入的的手机号码有误！');
				}
				$.ajax({
					url:'',
					dataType:'json',
					type:'post',
					data:{phone:phone},
					success:function  (ret) {
						if(true){
							mui.toast('验证码发送成功！，有效期xxxxx');
							var nums = 6;
							var timer1 = setInterval(function  () {
								nums--;
								if(nums<1){
									$('.cs_yan span').removeClass('cs_disable');
									$('.cs_yan span').text('获取验证码');
									clearInterval(timer1);
									return false;
								}
								$('.cs_yan span').addClass('cs_disable');
								$('.cs_yan span').text(nums+'秒后再试')
							},1000)
						}else{
							mui.toast('验证码发送失败！');
						}
					},
					error:function(err){
						console.log(err);
//							下面这段是演示倒计时,正常应删掉
							var nums = 6;
							var timer1 = setInterval(function  () {
								nums--;
								if(nums<1){
									$('.cs_yan span').removeClass('cs_disable');
									$('.cs_yan span').text('获取验证码');
									clearInterval(timer1);
									return false;
								}
								$('.cs_yan span').addClass('cs_disable');
								$('.cs_yan span').text(nums+'秒后再试')
							},1000)
					}
				})
			}
			
//			下一步
			function next () {
				setTimeout(show_next,500)
				
//				动画
				function show_next () {
					$('.cs_form1').animate({top:'-250px',opacity:0},600,function  () {
						$('.cs_form1').hide();
						$('.cs_form2').show();
						$('.cs_form2').animate({opacity:1,top:'-150px'},800,function  () {
							
						});
					});
				}
				
				
			}
		</script>
	</body>
</html>
